<template>
    <div class="goods-img">
        <div class="show-img">
            <img :src="showPic" alt="">
        </div>
        <DetailPiceSelect class="select" :goodsImg="goodsImg" @chooseImage="chooseImage"></DetailPiceSelect>
    </div>
</template>

<script>
    import DetailPiceSelect from "./DetailPiceSelect";
    import {eventBus} from "../../../common/util";

    export default {
        name: "DetailGoodsImg",
        props: {
          goodsImg: {
              type: Array,
              default() {
                  return [{}]
              }
          }
        },
        data() {
            return {
                showImgUrl: '',
                init: true
            }
        },
        components: {
            DetailPiceSelect
        },
        mounted() {
            eventBus.$on('paramsUrl2ShowUrl', (url)=> {
                this.chooseImage(url)
            })
        },
        computed: {
            showPic() {
                if (this.init) {
                    this.showImgUrl = this.goodsImg[0].url;
                }
                return this.showImgUrl
            }
        },
        methods: {
            chooseImage(url) {
                this.init = false;
                this.showImgUrl = url
            }
        }
    }
</script>

<style scoped>
    .show-img {
        width: 400px;
        height: 452px;
        overflow: hidden;
        border: 1px solid #ebebeb;
        margin: 0 auto;
    }
    .select {
        margin: 20px auto;
    }
    img {
        width: 100%;
    }
    .goods-img {
        width: 470px;
    }
</style>